<template>
  <el-dialog :visible.sync="visible" class="multilingual-dialog" :title="title" :width="width" :append-to-body="true">
    <div class="multilingual-dialog-container">
      <el-form label-position="top" ref="formRef" :model="form" :rules="rules" >
        <template v-for="v in languageList">
          <el-form-item :label="`${v.remark}：`" :prop="v.language" :key="v.language">
            <el-input
              v-model="form[v.language]"
              :placeholder="`请输入${v.remark}`"
              :type="type"
              :rows="3"
              style="width: 280px;"
            ></el-input>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  name: 'multilingual-dialog',
  props: {
    title: {
      type: String,
      default: '',
    },
    languageList: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String,
      default: '500px',
    },
    isNeedValidation: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'text',
      validator: val => {
        return ['text', 'textarea'].includes(val);
      },
    },
  },
  emits: ['input', 'update'],
  setup(props, { emit }) {
    let visible = ref(false);
    let formRef = ref(null);

    const form = reactive({
      zh: '',
      en: '',
      ja: '',
      ko: '',
    });
    const rules = reactive({});

    const updateForm = val => {
      // if (Object.keys(val).length === 0) {
      //   props.languageList.forEach(v => {
      //     state.form[v.language] = '';
      //   });
      // } else {
      //   Object.keys(val).forEach(key => {
      //     state.form[key] = val[key];
      //   });
      //   // state.form = Object.assign({}, val);
      // }
      props.languageList.forEach(v => {
        form[v.language] = val?.[v.language] || '';
      });
    };

    const init = value => {
      if (props.isNeedValidation) {
        props.languageList.forEach(v => {
          rules[v.language] = [
            {
              required: true,
              message: `${v.remark}不能为空`,
              trigger: 'blur',
            },
            // { max: 20, message: '最多20个字符', trigger: 'change' },
          ];
        });
      }

      updateForm(value);
    };

    const openDialog = value => {
      // console.log('openDialog', value);
      visible.value = true;
      init(value);
    };

    const handleConfirm = () => {
      formRef.value.validate(valid => {
        if (valid) {
          emit('update', form);

          formRef.value.clearValidate();
          visible.value = false;
        } else {
          console.info('表单校验不通过');
        }
      });
    };

    const handleClose = () => {
      formRef.value.clearValidate();
      updateForm({});
      visible.value = false;
    };

    // watch(
    //   () => props.value,
    //   val => {
    //     updateForm(val);
    //   }
    // );

    return {
      visible,
      form,
      rules,
      formRef,
      openDialog,
      handleConfirm,
      handleClose,
    };
  },
};
</script>

<style lang="scss" scoped>
// .el-form-item {
// 	display: flex;
// 	align-items: center;
// }

:v-deep(.el-form-item__content) {
	margin-left: 20px !important;
	width: 100%;
}
</style>
